<template>
    <div class="common-layout" style="display: flex; justify-content: center;">
        <el-container style="width: 70%;padding: 0 20%;" >
            <el-aside width="200px">
                <el-menu 
                default-active="1" 
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                text-color="#fff"
                >
                    <div v-for="infer in inferList">
                        <el-menu-item class="module_menu" :index="infer.inferid.toString()" @click="getModules(infer.inferid)">
                            <template #title>{{ infer.test_infer }}</template>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-aside>
            <el-container style="background-color: white;">
                <el-header style="padding: 15px; display: flex; justify-content: space-between;">
                    <el-row>
                        <el-checkbox v-model="linux" label="linux" border/>
                        <el-checkbox v-model="windows" label="windows" border disabled/>
                    </el-row>
                    <div style="margin-left: auto;">
                        <el-row>
                            <el-checkbox v-model="modules" @click="changeSwitch()" label="所有模块" border style="margin-right: 15px;"/>
                            <el-button type="primary">Start</el-button>
                            <el-button type="danger">Stop</el-button>
                        </el-row>
                    </div>
                </el-header>
                <el-main>
                    <div v-for="item in moduleList">
                        <el-row>
                            <el-col :span="22" style="padding: 10px;">
                              <el-text size="large">{{ item.module_name }}</el-text>
                            </el-col>
                            <el-col :span="2">
                              <el-switch size="large" v-model="item.module_status" style="--el-switch-on-color: #13ce66;"/>
                            </el-col>
                        </el-row>
                        <el-divider border-style="dotted" style="margin: 10px;"/>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { InferService } from '@/api/infer';

const linux = ref(true)
const windows = ref(false)
const modules = ref(true)
const inferList = ref()
const moduleList : any = ref([])

const getInfers = async () => {
    const res = await InferService.getInfers();
    inferList.value = res.data
    inferList.value.sort((a: { inferid: number; },b: { inferid: number; }) => {
        return a.inferid - b.inferid;
    })
}

const getModules = async (inferid: number) => {
    moduleList.value = []
    const res = await InferService.getModules(inferid);
    res.data[0].module_name.map((item: any) => {
        moduleList.value.push({ module_name: item, module_status: true})
    })
}

const changeSwitch = () => {
    if (modules.value === true) {
        for (var i = 0; i < moduleList.value.length; i++) {
            moduleList.value[i].module_status = false
        }
    }else {
        for (var i = 0; i < moduleList.value.length; i++) {
            moduleList.value[i].module_status = true
        }
    }
}

onMounted(() => {
    getInfers();
    getModules(1);
})
</script>

<style lang="scss">

.module_menu.is-active {
      background-color: #434a50 !important;
    }
</style>